<template>
    <view class="task-list">
        <view class="task-item" v-for="item in list" @click="toPage(item)">
            <image src="/static/t1.png" mode="scaleToFill" />
            <view class="info">
                <view>
                    {{ item.type == 1 ? `参与${item.name || item.activity_name}排课任务` : item.type == 2 ? `参与${item.name ||
                        item.activity_name}活动任务` : item.type == 3 ? '完成资料填写' : '' }}
                </view>
                <view>可以获得{{ item.gift_score }}积分</view>
            </view>
            <view class="to-button" :class="{
                disabled: item.disabled
            }">去完成</view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {

        }
    },
    methods: {
        toPage(item) {
            if(item.disabled) return
            switch (item.type) {
                case 1:
                    uni.navigateTo({
                        url: '/pages/coursesinfo/coursesinfo?id=' + item.id
                    })

                    break
                case 2:
                    uni.navigateTo({
                        url: '/pages/actinfo/actinfo?id=' + item.id
                    })
                    break
                case 3:
                    uni.navigateTo({ url: '/pages/myDetail/myDetail' })
                    break
            }
        }
    }
}
</script>
<style lang="scss">
.task-list {
    margin: 0 20rpx;
    background-color: white;
    padding: 0rpx 20rpx 0 20rpx;
    margin-top: 20rpx;

    .task-item {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1rpx solid rgba(0, 0, 0, .1);

        image {
            width: 100rpx;
            height: 100rpx;
        }

        .info {
            margin-left: 20rpx;
            flex: 1;

            view:nth-child(2) {
                margin-top: 20rpx;
            }
        }

        .to-button {
            padding: 20rpx 40rpx;
            background-color: #FF8A9B;
            border-radius: 100rpx;
            color: white;
        }

    }

    .disabled {
        opacity: .5;
    }
}
</style>